
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _babelHelperVueJsxMergeProps = _interopRequireDefault(require('@vue/babel-helper-vue-jsx-merge-props'));

const _utils = require('../utils');

const _functional = require('../utils/functional');

// Utils
const _createNamespace = (0, _utils.createNamespace)('skeleton');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const DEFAULT_ROW_WIDTH = '100%';
const DEFAULT_LAST_ROW_WIDTH = '60%';

function Skeleton(h, props, slots, ctx) {
  if (!props.loading) {
    return slots.default && slots.default();
  }

  function Title() {
    if (props.title) {
      return h('h3', {
        class: bem('title'),
        style: {
          width: (0, _utils.addUnit)(props.titleWidth),
        },
      });
    }
  }

  function Rows() {
    const Rows = [];
    const { rowWidth } = props;

    function getRowWidth(index) {
      if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
        return DEFAULT_LAST_ROW_WIDTH;
      }

      if (Array.isArray(rowWidth)) {
        return rowWidth[index];
      }

      return rowWidth;
    }

    for (let i = 0; i < props.row; i++) {
      Rows.push(h('div', {
        class: bem('row'),
        style: {
          width: (0, _utils.addUnit)(getRowWidth(i)),
        },
      }));
    }

    return Rows;
  }

  function Avatar() {
    if (props.avatar) {
      const size = (0, _utils.addUnit)(props.avatarSize);
      return h('div', {
        class: bem('avatar', props.avatarShape),
        style: {
          width: size,
          height: size,
        },
      });
    }
  }

  return h('div', (0, _babelHelperVueJsxMergeProps.default)([{
    class: bem({
      animate: props.animate,
    }),
  }, (0, _functional.inherit)(ctx)]), [Avatar(), h('div', {
    class: bem('content'),
  }, [Title(), Rows()])]);
}

Skeleton.props = {
  title: Boolean,
  avatar: Boolean,
  row: {
    type: [Number, String],
    default: 0,
  },
  loading: {
    type: Boolean,
    default: true,
  },
  animate: {
    type: Boolean,
    default: true,
  },
  avatarSize: {
    type: String,
    default: '32px',
  },
  avatarShape: {
    type: String,
    default: 'round',
  },
  titleWidth: {
    type: [Number, String],
    default: '40%',
  },
  rowWidth: {
    type: [Number, String, Array],
    default: DEFAULT_ROW_WIDTH,
  },
};

const _default = createComponent(Skeleton);

exports.default = _default;
